<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .infobox{
            border: 10px solid black;
            padding-left: 50px;
        }
        .form_1 input[type="text"] {
            height: 30px;
            border: 2px red solid;
            border-radius: 12px;
            font-size: 25px;
        }

        .form_1 button {
            height: 30px;

        }
        .form_1{
            margin-top: 10px;
        }
        .info {
            list-style: none;
            border-left: 10px aqua solid;
            border-top: 10px red solid;
            border-radius: 12px;
            width: 600px;
            margin: 0;
            padding: 0;
            overflow: auto;
            height: 400px;
        }

        .info li {
            width: 400px;
            height: 80px;
            box-shadow: 5px 5px 5px black;
            background-color: white;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .info li span {
            width: 90%;
            height: 100%;
            overflow: auto;
            word-break: break-all;
            /*解决让数字和文本在换行是在一起 word-break:break-all;*/
            color: black;


        }

        .info li button {

            width: 80px;
            height: 25px;
            position: absolute;
            left: 105%;
            top: 0;
            outline: 0;
            border: 1px solid black;
            background-color: white;
        }

        .info li button:hover {
            background-color: gray;
        }

        .info li div input {
            height: 100%;
            width: 20px;

        }

        .info li span p {
            margin: 0;
            padding: 0;
        }

        .info li button::before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: -15px;
            bottom: 0;
            border-bottom: 20px solid black;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            transform: rotate(-90deg) translateX(-30%);
        }
    </style>
</head>

<body>
    <div class="infobox">
        <form action="" class="form_1">
            <input type="text" placeholder="点击输入...">
            <button type="button" class="addbtn">点击添加</button>
            <button type="button" class="pfmbtn">显示完成</button>
        </form>
        <ul class="info">
            <h1>需要做的事件</h1>
            
        </ul>
    </div>
    <script>
        //代办列表
        //添加功能
        //1.添加表单内容
        //2.添加对应时间
        var form_1 = document.querySelector(".form_1")
        var form_1_addbtn = form_1.querySelector(".addbtn")
        var form_1_pfmbtn = form_1.querySelector(".pfmbtn")
        form_1_addbtn.onclick = ()=>{
            add()
            del()
           
        }
        var pfm_c = 0
        form_1_pfmbtn.onclick = ()=>{
                
                if(pfm_c%2===0){
                    check()
                    form_1_pfmbtn.innerHTML = "再次点击返回"
                }
                else{
                    check()
                    form_1_pfmbtn.innerHTML = "显示完成"
                }
                pfm_c++
            }
        
       
        function add(){
            //获取元素
            let form_1 = document.querySelector(".form_1")
            let info = document.querySelector(".info")
            let form_1_addbtn = form_1.querySelector(".addbtn")
            //获取表单内容
            let form_input = form_1.querySelectorAll("input")
            let con_event;
            form_input.forEach(item =>{
                con_event = item.value
                
            })
            if(con_event ==""){
                alert("请输入内容")
                return
            }
            
            //获取当前时间
            let time = new Date()
            let date = time.getFullYear()+":"+(time.getMonth()+1)+":"+time.getDate();
            
            
            //创建事件列表
            let li = document.createElement("li")
            
            li.innerHTML = `
            <span>
                    <p>${date}</p>
                    <p>${con_event}</p>
                </span>
                <button type="button">删除</button>
                <div>
                    <input type="checkbox">
                </div>`

            //添加
            info.appendChild(li) 
            form_input.forEach(item =>{
                item.value=""
                
            })
        

        
        }
        
        //删除功能
        //1.删除对应事件
        function del(){
            let info = document.querySelector(".info")
            let li = info.querySelectorAll("li")
            li.forEach(item=>{
                let btn = item.querySelector("button")
                btn.onclick = ()=>{
                    item.remove()
                }
            })
        }
        //检查功能
        //1.获取当前完成的事件
        function check(){
            //获取列表
            let info = document.querySelector(".info")
            let li = info.querySelectorAll("li")
            let form_1 = document.querySelector(".form_1")
            let form_1_pfmbtn = form_1.querySelector(".pfmbtn")
            li.forEach(item=>{
                let i_c = item.querySelector("input[type='checkbox']")
                if(form_1_pfmbtn.innerHTML == "显示完成"){
                    if(i_c.checked === false){
                        item.style.display = "none"
                       
                    }
                }
                if(form_1_pfmbtn.innerHTML == "再次点击返回"){
                    
                    item.style.display = "flex"
                }
            })
           
        }
    
    
    
    
    
    
    
    </script>
</body>

</html>